<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Configuración de cajas de la página principal</title>

<style type="text/css">

div {
	border: 1px dotted black;
}

#header {
	width: 100%;
	height: 100px;
	border: none;
	position:relative;
}

	#header_left_column {
		position:absolute;
		top:0;
	 	left:0;
		width: 9.5%;
		height: 100px;
	}
	
	#header_center_column {
		position:absolute;
		top:0;
	 	left:10.5%;
		width: 69%;
		height: 100px;
	}
	
	#header_right_column {
		position:absolute;
		top:0;
	 	right:0;
		width: 19.4%;
		height: 100px;
	}

#top_menu {
	width: 100%;
	height: 40px;
	margin: 10px 0px 0px 0px;
}

#container {
	border: none;
	position:relative;
	width: 100%;
	height: 400px;
	margin: 10px 0px 0px 0px;
}

	#container_left_column {
		position:absolute;
	 	top:0;
	 	left:0;
		width: 79.5%;
		height: 100%;
	}
	
	#container_right_column {
		position:absolute;
	 	top:0;
	 	right:0;
		width: 19.5%;
		height: 100%;
	}

#footer {
	width: 100%;
	height: 100px;
	margin: 10px 0px 0px 0px;
}

</style>
</head>
<body>
	
	<!-- Cabecera -->
	<div id="header">
		
		<!-- Columna derecha -->
		<div id="header_left_column">
			<p>header_left_column</p>
		</div>
		<!-- Columna central -->
		<div id="header_center_column">
			<p>header_center_column</p>
		</div>
		<!-- Columna derecha -->
		<div id="header_right_column">
			<p>header_right_column</p>
		</div>
	
	</div>
	<!-- Menu superior -->
	<div id="top_menu">
		<p>top_menu</p>
	</div>
	<!-- Cuerpo central -->
	<div id="container">
	
		<!-- Columna derecha -->
		<div id="container_left_column">
			<p>container_left_column</p>
		</div>
		<!-- Columna derecha -->
		<div id="container_right_column">
			<p>container_right_column</p>
		</div>
	</div>
	<!-- Pie -->
	<div id="footer">
		<p>footer</p>
	</div>
	
</body>
</html>